import { Component, ElementRef, Input, OnInit, Renderer2, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { NzMessageService } from 'ng-zorro-antd/message';
import { Message } from 'src/app/models/message';

@Component({
  selector: 'zepride-task-card',
  templateUrl: './task-card.component.html',
  styleUrls: ['./task-card.component.less']
})
export class TaskCardComponent implements OnInit {

  @Input() title = '';
  @Input() messages: Message[] = [];
  @Input() redirectPage: {
    pageId: string;
    pageType: 'normalPage' | 'workflow';
    menuId: string;
    menuName: string;
  };
  currentIndex = 0;
  @ViewChild('msgWrapper') msgWrapper: ElementRef<HTMLDivElement>;

  constructor(
    private renderer: Renderer2,
    private messageService: NzMessageService,
    private router: Router
  ) { }

  ngOnInit(): void { }

  prev() {
    if (this.currentIndex > 0) {
      this.currentIndex--;
      this.setStyleByIndex(this.currentIndex);
    }
  }

  next() {
    if (this.currentIndex < this.messages.length - 1) {
      this.currentIndex++;
      this.setStyleByIndex(this.currentIndex);
    }
  }

  setStyleByIndex(index: number) {
    const percent = index * 100 * -1;
    this.renderer.setStyle(this.msgWrapper.nativeElement, 'transform', `translateX(${percent}%)`);
  }

  redirect() {
    if (this.redirectPage && this.redirectPage.pageId && this.redirectPage.pageType) {
      if (this.redirectPage.pageType === 'workflow') {
        this.router.navigate(['home/page/workflow-page', this.redirectPage.pageId]);
      } else if (this.redirectPage.pageType === 'normalPage') {
        this.router.navigate(['home/page/normal-page', this.redirectPage.pageId]);
      }
    } else {
      this.messageService.error('未配置跳转页面');
    }
  }
}
